<template>
	<view class="myContent">
		<!-- 提现模态框 -->
		<u-modal :show="tx.show" :title="tx.title" @confirm="confirmTX" @cancel="cancelTX" @close="closeTX"
			:closeOnClickOverlay="closeOnClickOverlay" :confirmText="tx.confirmText" :cancelText="tx.cancelText"
			:showConfirmButton="showConfirmButton" :showCancelButton="showCancelButton" confirmColor="green">
			<view class="slot-content">
				<rich-text :nodes="tx.content"></rich-text>
			</view>
		</u-modal>
		<u-loading-page :loading="loading" loading-text=" "></u-loading-page>
		<u-empty mode="car" v-if="list.length === 0" text="暂无消费记录"></u-empty>
		<view class="u-page">
			<u-list @scrolltolower="scrolltolower" @scrolltoupper='scrolltoupper'>
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="card_container">
						<view class="my_card">
							<view class="first_row">
								<view class="first_cloumn_1">
									<view>{{item.businessInfo[0].store_name}}</view>
								</view>
								<view class="first_cloumn_2">
									<view>
										<button v-if="item.consume_status === 1" class="tixian_btn"
											@click="tixian(item)">立即提现</button>
										<button v-else class="tixian_btn_no">不可提现</button>
									</view>

								</view>
							</view>
						</view>
						<view class="divider_heng"></view>
						<view class="second_row" style="width: 90%;margin-left: 5%">
							<view class="tip-bottom">
								可提现：{{$mytools.regFenToYuan(item.withdrawableBalance)}}
							</view>
							<view>
								<u-line-progress :percentage="item.progress" activeColor="#f26161"
									inactiveColor="#e0e3ea" height="20" :showText="showText">
								</u-line-progress>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<u-loadmore v-show="list.length>size" :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
			margin-bottom="30" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				showText: true,
				list: [],
				userType: 0,
				size: 10,
				loading: true,
				// nomore，loading，loadmore
				status: 'loadmore',
				timer: null,
				tx: {
					tittle: '提现',
					content: '提现规则:xxxxx',
					show: false,
					cancelText: '我再想想',
					confirmText: '确认提现'
				},
				showConfirmButton: true,
				showCancelButton: true,
				closeOnClickOverlay: true,
				tixianItem: null, //提现目标
			}
		},
		onLoad() {
			// 初始化参数
			this.list = []
			this.status = 'loadmore'
			this.userType = uni.getStorageSync(app.globalData.session.userAccountType)
			// 开启下拉刷新
			uni.startPullDownRefresh();
			// do something
			this.loadmore()
		},
		onPullDownRefresh() {
			this.loading = true
			this.list = []
			this.status = 'loadmore'
			console.log('onPullDownRefresh');
			// 判断是否在查询中，防止多次下拉
			if (this.status == 'loading' || this.status == 'nomore') {
				console.log('正在刷新');
				uni.hideLoading()
				return;
			}
			this.loadmore()
			uni.stopPullDownRefresh();
			this.timer = setTimeout(function() {
				uni.stopPullDownRefresh();
				// 加载框和下拉加载一起消失，此处不需要，调用loadmare完成后会设置为false
				// this.loading = false
			}, 500);
		},
		onReachBottom() {
			console.log('onReachBottom');
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.loadmore()
		},
		methods: {
			loadmore() {
				if (this.status == 'loading' || this.status == 'nomore') {
					return;
				}
				if (this.userType == 1) {
					this.loadmoreUserComsumeRecord()
				} else if (this.userType == 2) {
					uni.showToast({
						title: '请切换至用户端查看',
						icon: 'none'
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/newMy/myCenter',
							complete() {
								uni.hideToast()
							}
						})
					}, 1500);
				}
			},
			// 顶部
			scrolltoupper() {
				console.log('scrolltoupper');
				this.list = []
				this.status = 'loadmore'
				this.userType = uni.getStorageSync(app.globalData.session.userAccountType)
				// do something
				this.loadmore()
			},
			// 底部
			scrolltolower() {
				console.log('scrolltolower');
				this.loadmore()
			},
			async loadmoreUserComsumeRecord() {
				this.loading = true
				this.status = "loading";
				let that = this
				let userinfo = uni.getStorageSync(app.globalData.session.userInfo)
				let result = await uniCloud.callFunction({
					name: 'zhy-consume-record-query',
					data: {
						user_id: userinfo.user_id,
						skip: that.list.length,
						size: this.size,
						queryType: 3
					}
				})
				if (result.result.length < this.size) {
					// 没有更多了
					this.status = "nomore"
				} else {
					// 加载更多
					this.status = "loadmore"
				}
				// this.status = "loadmore"
				console.log('list:' + JSON.stringify(result));
				if (this.list.length > 0 && result.result.length > 0) {
					if (this.list[0]._id === result.result[0]._id) {
						console.log('多次下拉刷新');
						this.list = []
					}
				}
				this.list = this.list.concat(result.result)
				console.log('list:' + JSON.stringify(that.list));

				uni.stopPullDownRefresh();
				this.loading = false
			},
			tixian(item) {
				this.item = tixianItem
				// 点击提现
				/* this.tx.content =
					'亲，你参与的“霸王补贴”活动还未补满哦，中途提现将会导致退出补贴队列，中断“霸王补贴”活动，不再继续享受补贴了哦！' +
					'<br/>您确定要现在提现吗？' */
				this.tx.content =
					'每笔提现需要扣除6%提现手续费确认<br/>确认提现后将会在24小时内到账'
				this.tx.show = true
				this.tittle = '提示'
			},
			confirmTX() {
				console.log(JSON.stringify(this.tixianItem));
				// 提现--然后关闭模态框
				this.tx.show = false;
				console.log('确认提现..在花币..全部提现');
				// let total_amount = this.$mytools.regYuanToFen(this.tixianItem.withdrawableBalance, 100)
				let total_amount = this.tixianItem.withdrawableBalance
				let txParam = {
					// user用户 tx提现
					out_batch_no: this.$idGenerator.createUniqueId('usertx'),
					batch_name: '用户提现',
					batch_remark: '感谢参与霸王补贴',
					total_amount: total_amount, //单位：分
					total_num: 1,
					transfer_detail_list: [{
						out_detail_no: this.$idGenerator.createUniqueId('usertx'),
						transfer_amount: total_amount,
						transfer_remark: this.$mytools.formatTimestampToDateStr(new Date().getTime()) +
							'日一次性提现',
						openid: uni.getStorageSync(app.globalData.session.userKey),
						user_name: null //>2000元才必须
					}]
				}
				let that = this
				this.$zhyPay.userWithdrawToCash(txParam).then(res => {
					console.log('提现成功');
					console.log(JSON.stringify(res));
					this.$logintool.login().then(res => {
						console.log('重新登录完成');
						that.timer = setTimeout(() => {
							that.redirectThisPage()
						}, 500)
					})
				}).catch(err => {
					console.log('提现失败');
					console.log(JSON.stringify(err));
					uni.showToast({
						title: '提现失败',
						icon: 'none'
					})
				})
			},
			redirectThisPage() {
				// 回到个人中心
				uni.switchTab({
					url: '/pages/newMy/myCenter'
				})
			},
			cancelTX() {
				this.item = null
				console.log('取消...');
				this.tx.show = false
				uni.showToast({
					title: '您已取消',
					icon: 'none'
				})
			},
			closeTX() {
				this.item = null
				console.log('点击遮罩层，关闭');
				this.tx.show = false
			},
		},
		onUnload() {
			console.log('清除计时器');
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		}
	}
</script>

<style>
	page {
		background-color: #eaeaea;
	}

	.myContent {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.my_card {
		flex-direction: row;
		/* 		display: flex; */
		/* height: 200rpx; */
	}

	.first_row {
		display: flex;
	}

	.card_container {
		border-radius: 40rpx;
		width: 95%;
		/* margin-top: 10rpx; */
		margin-left: 20rpx;
		margin-top: 25rpx;
		padding-bottom: 30rpx;
		background: white;
		margin-bottom: 40rpx;
	}

	.divider {
		width: 1px;
		height: 60px;
		border-left: 1px dashed #cecece;
		margin-top: 50rpx;
		width: 100rpx;
	}

	.first_cloumn_1 {
		width: 45%;
		margin-top: 5%;
		font-size: 32rpx;
		/* width: 30%; */
		/* background-color: green; */
		text-align: center;
		/* align-self: center; */
		/* background-color: forestgreen; */
	}

	.first_cloumn_2 {
		/* background-color: red; */
		width: 45%;
		margin-top: 2%;
		/* width: 30%; */
		/* background-color: green; */
		text-align: center;
		/* align-self: center; */
		margin-left: 5%;
	}

	.tixian_btn {
		border-radius: 50rpx;
		width: 90%;
		/* font-size: 34rpx; */
		background-color: black;
		color: white;
		font-size: 30rpx;
		font-weight: 500;
		/* border-radius: 20rpx; */
	}

	.tixian_btn_no {
		border-radius: 50rpx;
		width: 90%;
		background-color: #999aaa;
		color: white;
		font-size: 30rpx;
		font-weight: 500;
	}

	.divider_heng {
		width: 1px;
		/* height: 60px; */
		border-bottom: 1px dashed #cecece;
		margin-top: 30rpx;
		width: 90%;
		margin-left: 5%;
		margin-bottom: 30rpx;
	}

	.tip-bottom {
		margin: 30rpx;
		/* padding: 10rpx; */
		/* width: 300px; */
		/* height: 60px; */
		border: 1px solid white;
		position: relative;
		background-color: rgb(224, 227, 234);
		/*设置圆角*/
		-webkit-border-radius: 10rpx;
		-moz-border-radius: 10rpx;
		border-radius: 15rpx;
		text-align: center;
		margin-left: 20%;
		width: 60%;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}

	.tip-bottom:before,
	.tip-bottom:after {
		content: "";
		display: block;
		border-width: 15px;
		position: absolute;
		bottom: -30px;
		left: 45%;
		border-style: solid dashed dashed solid;
		border-color: white transparent transparent transparent;
		font-size: 0;
		line-height: 0;
	}

	.tip-bottom:after {
		bottom: -27px;
		border-color: rgb(224, 227, 234) transparent transparent transparent;
	}

	.u-percentage-slot {
		/* padding: 1px 5px; */
		background-color: $u-warning;
		color: #fff;
		border-radius: 100px;
		font-size: 10px;
		margin-right: -5px;
	}

	.second_row_progress {
		width: 90%;
		margin-left: 5%;
	}

	.second_cloumn {
		width: 40%;
		text-align: center;
		align-self: center;

	}

	.third_cloumn {
		width: 30%;
		text-align: center;
		align-self: center;
	}

	.button_word {
		/* margin-bottom: 10rpx; */
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: black;
		border-radius: 15rpx;
		width: 90%;
	}

	.paiwei {
		font-size: 34rpx;
		margin-top: 15rpx;

	}

	.paiwei_num {
		font-size: 36rpx;
		margin-top: 30rpx;
		/* margin-left: -10rpx; */
	}



	.second_bs {
		margin-top: 30rpx;
		font-size: 28rpx;
	}

	.second_amount {
		font-size: 28rpx;
	}

	.second_pay_time {
		font-size: 28rpx;
	}


	.allowence_status {
		font-size: 36rpx;
		font-weight: 500;
	}

	.button_list {
		display: flex;
	}

	.queue_button {
		width: 30%;
	}

	.exit_button {
		width: 40%;
	}

	.allowence_button {
		width: 30%;
	}

	.button_word_queue {
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: black;
		border-radius: 15rpx;
		width: 80%;
	}

	.button_word_exit {
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: black;
		border-radius: 15rpx;
		width: 70%;
	}

	.button_word_allowence {
		font-size: 30rpx;
		font-weight: 600;
		color: white;
		background-color: black;
		border-radius: 15rpx;
		width: 90%;
	}
</style>